<template>
  <div class="feed">
    <div class="feed-card">
      <div class="name">设备名称</div>
      <div class="title-contant">{{getMachine.title}}</div>
      <div class="line"></div>
      <div class="name">选择位置</div>
      <div class="title-contant">
        <span class="text">{{mapInputValue}}</span>
        <div class="icon" @click="showMap()">
          <i class="iconfont icon-dizhi"></i>
          <span>定位</span>
        </div>
      </div>
    </div>
    <div class="input-contant">
      <div class="text">纠正地址信息</div>
      <div class="row">
        <div class="check-contant" @click="changeIndex(1)">
          <div class="check-box" v-show="type != 1"></div>
          <img :src="gou" alt v-show="type == 1">
          <div class="check-text">位置错误</div>
        </div>
        <div class="check-contant" @click="changeIndex(2)">
          <div class="check-box" v-show="type != 2"></div>
          <img :src="gou" alt v-show="type == 2">
          <div class="address-text">地点不存在</div>
        </div>
      </div>
      <div class="line"></div>
      <div class="text">反馈地址信息</div>
      <textarea class="edit" v-model="content"  @blur="inputBack()" placeholder="请根据地点进行简要描述，如周边特征，建筑，所在街道等"></textarea>
    </div>
    <div class="button-contant" @click="postData()">
      <div class="button">确认提交</div>
    </div>
    <div class="map" v-show="mapShow" ref="map"></div>
    <div class="map-input-contant" v-show="mapShow">
      <!-- <input type="text" class="mapInput" v-model="mapInputValue">
      <div class="search">搜索</div>-->
      <div class="mapInput">{{mapInputValue}}</div>
    </div>
    <div class="colse" v-show="mapShow" @click="hiddenMap()">关闭</div>
  </div>
</template>

<style lang="less" scoped>
@import "index.less";
</style>

<script>
import { mapActions, mapGetters } from "vuex";
import wx from "weixin-js-sdk";
export default {
  name: "stations",
  data() {
    return {
      type: 1,
      gou: require("../../assets/public/gou.png"),
      content: "",
      mapShow: false,
      geocoder: null,
      geocoder1: null,
      markersArray: [],
      map: null,
      mapRes: "",
      mapInputValue: "",
      lng: 0,
      lat: 0
    };
  },
  created() {
    this.change(false);
    console.log(this.getMachine, "输出检测");
    this.getInt(); // 获取地理信息
    this.mapInputValue = this.getMachine.address;
  },
  methods: {
    ...mapActions("Home", ["change"]),
    // 更改选择类型
    changeIndex(index) {
      this.type = index;
    },
    postData() {
      this.$dialog.loading.open("正在加载");
      this.$http
        .post("/error/Create", {
          deviceid: this.getMachine.id,
          class: this.type,
          title: this.getMachine.title,
          address: this.mapInputValue,
          content: this.content
        })
        .then(res => {
          console.log(res.data.data);
          if (res.data.errno == 0) {
            this.$dialog.toast({
              mes: "提交成功",
              timeout: 1500,
              icon: "success"
            });
          } else {
            this.$dialog.toast({
              mes: "提交失败",
              timeout: 1500,
              icon: "error"
            });
          }
          this.$dialog.loading.close();
        });
    },
    // 展示地图
    showMap() {
      const that = this;
      console.log("地图开");
      this.mapShow = true;
      var center = new qq.maps.LatLng(this.lat, this.lng);
      this.map = new qq.maps.Map(this.$refs.map, {
        center: center, // 地图的中心地理坐标。
        zoom: 16 // 地图的中心地理坐标。
      });
      this.geocoder1 = new qq.maps.Geocoder({
        complete: function(result) {
          that.mapInputValue = result.detail.address;
        }
      });
      this.addMarker(center);
      this.geocoder = new qq.maps.Geocoder({
        complete: function(result) {
          that.map.setCenter(result.detail.location);
          var marker = new qq.maps.Marker({
            map: that.map,
            position: result.detail.location
          });
        }
      });
      that.geocoder1.getAddress(center);
      // 点击位置
      qq.maps.event.addListener(this.map, "click", function(event) {
        that.clearOverlays();
        that.addMarker(event.latLng);
        that.geocoder1.getAddress(event.latLng);
      });
    },
    //添加标记
    addMarker(location) {
      var marker = new qq.maps.Marker({
        position: location,
        map: this.map
      });
      this.markersArray.push(marker);
    },
    //清除覆盖层
    clearOverlays() {
      if (this.markersArray) {
        for (let i in this.markersArray) {
          this.markersArray[i].setMap(null);
        }
      }
    },
    hiddenMap() {
      this.mapShow = false;
    },
    // 获取当前位置
    getInt() {
      const that = this;
      wx.getLocation({
        type: "wgs84", // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
        success: function(res) {
          console.log(res);
          that.lat = res.latitude;
          that.lng = res.longitude;
          //   var speed = res.speed; // 速度，以米/每秒计
          //   var accuracy = res.accuracy; // 位置精度
        }
      });
    }
  },
  computed: {
    ...mapGetters("PayType", ["getMachine"])
  },
  components: {}
};
</script>
